<template>
  <div class="app-container">
    <el-empty description="暂时没有任务" v-if="isEmpty" ></el-empty>
    <div v-if="!isEmpty">
    <el-row :gutter="20"> <!-- 添加gutter可以设置卡片之间的间隔 -->
      <el-col :span="8" v-for="(chartData, index) in chartSet" :key="index"> <!-- 每个卡片占6列，共4列 -->
        <el-card
          :body-style="{ padding: '10px',height:'545px'}"
          shadow="hover"
          class="chart-card"
        >
        <p style="text-align: center; width: fit-content; margin: 0 auto;color: teal;font-weight: bold;">图表名称：{{chartData.name }}</p>
        <el-divider></el-divider>
        <p>图表信息摘要</p>
        <p>{{subString(chartData.rawData) }}</p>
        <el-result  title="图表生成中">
          <template slot="icon">
            <el-image src="http://www.easyicon.cn/api/resizeApi.php?id=1291258&size=128" ></el-image>
          </template>
          <template slot="extra">
            <p style="text-align: center; width: fit-content; margin: 0 auto;color: teal;font-weight: bold;">图表状态：{{chartData.status }}</p>
          </template>
        </el-result>
        
        </el-card>
     </el-col>
   </el-row>
  </div>
  </div>
</template>

<script>
import { queryByChartStatus } from '@/api/chart';
import { mapGetters } from 'vuex'
export default {
  name: 'Task',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
     chartSet:[],
     isEmpty:true,
    }
  },
  created(){
    queryByChartStatus({data:{userAccount:this.name,status:"succeed"}}).then(response=>{
      this.chartSet=response.data
      if(this.chartSet!=null){
        this.isEmpty=false
      }
    })
  },
  watch: {

  },

  methods: {
    subString(data){
      if(data.length>72){
        return data.substring(0,72)+"....."
      }else{
        return data
      }
    }
  }
}
</script>

